<template>
	<view class="wrap">

		<image src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/bg.png" class="bg-set" mode="">
		</image>
		<view v-if="curUserInfo.avatarUrl" class="avatar">
			<image class="img" :src="curUserInfo.avatarUrl" mode=""></image>
			<view class="info">
				<view class="top">
					{{curUserInfo.nickName}}
				</view>

			</view>
			<view @click="logout" class="loginout">
				退出登录
			</view>
		</view>
		<view @click="login()" v-else class="avatar">
			<image class="img" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/1.png" mode="">
			</image>
			<view class="info">
				<image style="opacity: 0;" class="img"
					src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/1.png" mode="">
				</image>

				<view class="status">
					<text style="color: #8CC950;">点击立即登录</text>
				</view>
			</view>
			<view></view>
		</view>
		<view class="vips">
			<view v-if="!isVip" class="left">
				开通会员享受更多尊贵权益
			</view>
			<view v-else class="ok">
				已开通会员
				<text>会员截止时间 {{vipExpireTime}}</text>
			</view>
			<view class="right" @click="buyingMembership">

				{{isVip?'立即续费':"立即开通"}}

			</view>
		</view>
		<view class="handleRecord">
			<view class="name">
				制作记录
				<image @click="handleRecord" class="narrow"
					src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/10.png" mode="">
			</view>
			<view v-if="make_index.length" class="list">
				<image v-for="item in make_index" :src="item.cover_url" mode=""></image>
			</view>
			<view v-else >
				<u-empty  src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/nodata!.png"
					 text="暂无数据" mode="list"></u-empty>
			</view>
		</view>

		<view class="list1">
			<view class="item" v-for="item in list1" @click="navTo(item.route)">
				<image class="img" :src="item.url" mode=""></image>
				<view class="name">
					{{item.name}}

					</image>
				</view>
			</view>
		</view>
		<view class="list2">
			<view class="item" v-for="item in list2" @click="navTo(item.route)">
				<view class="left">
					<image class="img" :src="item.url" mode=""></image>
					<view class="name">
						{{item.name}}
					</view>
				</view>
				<image class="narrow" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/10.png"
					mode="">
				</image>
			</view>

			<view class="item" @click="contastUs()">
				<view class="left">
					<image class="img" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/7.png"
						mode="">
					</image>
					<view class="name">
						在线客服
					</view>
				</view>
				<image class="narrow" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/10.png"
					mode="">
				</image>
			</view>

			<view class="item">
				<view class="left">
					<image class="img" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/8.png"
						mode="">
					</image>
					<view class="name">
						分享给好友
					</view>
				</view>
				<image class="narrow" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/10.png"
					mode="">
				</image>
				<button class="btn" open-type="share"></button>
			</view>
			<view class="item" @click="aboutuS()">
				<view class="left">
					<image class="img" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/9.png"
						mode="">
					</image>
					<view class="name">
						关于我们
					</view>
				</view>
				<image class="narrow" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/10.png"
					mode="">
				</image>
			</view>
		</view>
		<!-- <u-popup border-radius="20" v-model="mask3" mode="center">
			<image @click="mask3=false" class="close"
				src="@/static/icon/close.png" mode=""></image>
			<view class="qq">
				<mask3 @clickSample="clickSample" />
			</view>
		</u-popup> -->
	</view>
</template>
<script>
	export default {

		data() {
			return {

				make_index: [], //获取制作记录前三个
				list1: [{
					name: '我的订单',
					route: '/subpackMain/user/order',
					url: 'https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/2.png',
				}, {
					name: '下载记录',
					route: '/subpackMain/user/download',
					url: 'https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/3.png',
				}, {
					name: '浏览记录',
					route: '/subpackMain/user/history',
					url: 'https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/4.png',
				}],
				list2: [{
						name: '常见问题',
						route: '/subpackMain/user/problem',
						url: 'https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/5.png',
					}, {
						name: '意见反馈',
						route: '/subpackMain/user/comment',
						url: 'https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/6.png',
					}
					// , {
					// 	name: '在线客服',
					// 	// route: '/subpackMain/user/about',
					// 	url: 'https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/7.png',
					// }

				],
				mask3: false,
				// 苹果手机
				isIPhone: false,
				// 用户状态 0游客 1非游客
				userStatus: 0,
				nickname: 'Kathellen33',
				// 用户头像
				avatarUrl: '',
				// 会员到期时间
				vipExpireTime: '',
				// 是否是会员
				isVip: true,
				imId: '179962894',
				// 用户信息
				curUserInfo: null
			};
		},
		mounted() {
			uni.hideLoading()
			// 获取制作记录前三个
			this.getmake_index()
		},
		onShow() {
			// 获取会员信息
			this.getVipInfo()
			// this.checkAuth()
			this.curUserInfo = this.vuex_userInfo ?? null
			console.log(this.curUserInfo, 333333);
		},
		
		// 加载分享信息
		async onShareAppMessage() {
			if (this.shareTitle == '') {
				// #ifdef MP-TOUTIAO
				// 获取分享信息
				await this.getDyShareInfo();
				// #endif
			}

			return {
				// 标题
				title: this.shareTitle,
				// url
				path: 'pages/sys/home/index',
				templateId: this.shareId,
			};
		},

		methods: {
			// 退出登录
			logout(){
			
				this.$u.api.logout({
					appletId: this.vuex_appletId
				}).then(res => {
					// this.$u.vuex('vuex_token', '')
					this.$u.vuex('vuex_userInfo', '');
					this.curUserInfo = ''
				})
			},
			// logout
			aboutuS() {
				uni.navigateTo({
					url: "/subpackMain/user/about"
				})
			},
			getmake_index() {
				this.$u.api.mine.make_index({
					appletId: this.vuex_appletId
				}).then(res => {
					this.make_index = res.data
				})
			},
			handleRecord() {
				uni.navigateTo({
					url: "/subpackMain/user/makeRecords"
				})
			},

			buyingMembership() {
				
				// uni.navigateTo({
				// 	url: "/subpackMain/user/buyingMembership"
				// })
				
				
				if(this.curUserInfo.avatarUrl){
					uni.navigateTo({
						url: "/subpackMain/user/buyingMembership"
					})
				}else{
					let that = this;
					uni.getUserProfile({
						provider: '',
						success(res) {
							that.$u.vuex('vuex_userInfo', res.userInfo);
							 that.curUserInfo = res.userInfo;
							 uni.navigateTo({
							 	url: "/subpackMain/user/buyingMembership"
							 })
						}
					});
				}
				
			},

			// 获取会员信息
			getVipInfo() {
				this.$u.api.mine.getVipInfo().then(res => {
					
					this.isVip = res.data.isVip
					this.vipExpireTime = res.data.vipExpireTime
					
					this.$u.vuex('vuex_isVip', res.data.isVip);
					this.$u.vuex('vuex_vipExpireTime', res.data.vipExpireTime);
				})
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			// 联系我们
			contastUs() {

				// 获取联系我们客服地址
				this.$u.api.mine.getCustomerUrl({
					appletId: this.vuex_appletId
				}).then(res => {
					if (res.code != 200) {
						this.$u.toast(res.msg)
						return
					}

					uni.navigateTo({
						url: '/subpackMain/user/webview?url=' + res.data.customerUrl
					})

					// uni.navigateTo({
					// 	url: '/pages/sys/user/webview?url=' + res.data.customerUrl
					// })
				})
			},
			buy() {
				uni.navigateTo({
					url: "/pages/sys/user/buy",
					events: {
						isVip: data => {
							// 重新请求接口
							this.getVipInfo();
							if (!data) {
								// 打开体验会员弹窗
								this.mask3 = true;
							}

						}
					}
				})
			},
			// 点击体验卡
			clickSample() {
				// 打开体验会员弹窗
				this.mask3 = false;
				uni.navigateTo({
					url: "/pages/sys/user/buy?sample=" + true,
					events: {
						isVip: data => {
							// 重新请求接口
							this.getVipInfo();
							if (!data) {
								// 打开体验会员弹窗
								this.mask3 = true;
							}

						}
					}
				})
			},
			// 获取抖音分享信息
			getDyShareInfo() {
				return new Promise((resolve) => {
					this.$u.api.dy.getShareInfo().then(res => {
						this.shareId = res.data.shareId;
						this.shareTitle = res.data.shareTitle;
						resolve();
					})
				})
			},

		}
	};
</script>
<style scoped lang="scss">
	/deep/ .u-icon__img{
		margin-top: -20rpx !important;
		width: 388rpx !important;
		height: 200rpx !important; 
	}
	.bg-set {
		height: 227rpx;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.loginout {
		width: 127rpx;
		height: 45rpx;
		background: #915eff;
		z-index: 9;
		font-size: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 0.8);
		display: flex;
		align-items: center;
		justify-content: center;

		border-radius: 31rpx;

	}

	.wrap {
		margin: 0 24rpx;

		/deep/ .u-mode-center-box {
			background: none !important;
			overflow: initial !important;
		}

		.close {
			width: 65rpx;
			height: 65rpx;
			display: block;
			position: fixed;
			top: 127rpx;
			right: 41rpx;
			z-index: 999;
			// background: rgba(255,255,255,0.8);
			// margin: 46rpx auto;
		}

		.img {
			width: 132rpx;
			height: 132rpx;
			margin-right: 24rpx;
			border-radius: 50%;
		}

		.list2 {
			margin: 32rpx 0;
			background: #1E1E38;
			border-radius: 20rpx;
			padding: 45rpx 42rpx 45rpx 47rpx;

			.item {
				position: relative;
				margin-bottom: 60rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.btn {
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					top: 0;
					width: 100%;
					// height: 50px;
					opacity: 0;
				}


				&:last-child {
					margin-bottom: 0;
				}

				.left {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-family: PingFang HK-Light, PingFang HK;
					font-weight: 300;
					color: #FFFFFF;
					line-height: 33rpx;

					.img {
						width: 44rpx;
						height: 44rpx;
						margin-right: 16rpx;
					}
				}

				.narrow {
					width: 13rpx;
					height: 22rpx;
				}
			}
		}

		.handleRecord {
			margin: 32rpx auto;
			width: 702rpx;
			height: 361rpx;
			background: rgba(45, 48, 85, 0.35);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			opacity: 1;

			.list {
				padding: 0 32rpx 32rpx;

				image {
					width: 197rpx;
					height: 229rpx;
					border-radius: 10rpx;
					margin-right: 24rpx;

					&:last-child {
						margin-right: 0;
					}
				}
			}

			.name {
				font-size: 30rpx;
				font-family: Tomorrow, Tomorrow;
				font-weight: 400;
				color: #8CC950;
				line-height: 35rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 34rpx 32rpx 30rpx;

				.narrow {
					width: 13rpx;
					height: 22rpx;
				}
			}
		}

		.list1 {
			background: rgba(45, 48, 85, 0.35);
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			padding: 42rpx 64rpx;
			margin-top: 32rpx;

			.item {

				.img {
					width: 108rpx;
					height: 108rpx;
					margin: 0 auto;
					display: block;
				}

				.name {
					font-size: 30rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 300;
					color: #FFFFFF;
					line-height: 35rpx;
				}
			}
		}

		.vips {
			margin: 0 auto;
			background: url('https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/vip.png') no-repeat;
			background-size: cover;
			width: 702rpx;
			height: 167rpx;
			position: relative;

			.ok {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 300;
				color: #FFFFFF;
				line-height: 33rpx;
				padding: 98rpx 0 0 32rpx;

				text {
					font-size: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #8CC950;
					line-height: 22rpx;
					transform: scale(0.9);
				}

			}

			.left {
				position: absolute;
				bottom: 30rpx;
				left: 32rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 300;
				color: #FFFFFF;
				line-height: 33rpx;
			}

			.right {
				position: absolute;
				right: 24rpx;
				top: 48rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 185rpx;
				height: 72rpx;
				background: #16AC51;
				border-radius: 68rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 33rpx;
			}
		}

		.avatar {
			display: flex;
			align-items: center;
			height: 227rpx;


			.img {
				width: 103rpx;
				height: 103rpx;
				position: relative;
				margin-right: 28rpx;
				margin-left: 8rpx;
			}


			.info {
				flex: 1;
				position: relative;

				.top {
					font-size: 32rpx;
					margin-bottom: 5rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					// line-height: 38rpx;
				}

				.status {
					font-size: 22rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #737B9A;
					position: absolute;
					top: 22px;
					// line-height: 26rpx;
				}
			}
		}
	}
</style>
